<template>
    <div>
        <el-row>
            任务名称：
            <el-input v-model="name" style="width:44%;margin-left: 9px;margin-top: 20px" clearable
                      placeholder="请输入任务名称"></el-input>
        </el-row>
        <el-row>
            选择数据：
            <el-select
                    v-model="value" style="margin-top:20px;margin-left: 10px;" clearable placeholder="请选择统计数据"
                    @change="changeDataFields">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-row>
        <el-row>
            选择X轴：
            <el-select
                    v-model="xfield" style="margin-left: 15px;margin-top:20px;" clearable placeholder="请选择统计字段">
                <el-option
                        v-for="item in fieldOption"
                        :key="item.field"
                        :label="item.fieldName"
                        :value="item.field">
                </el-option>
            </el-select>
        </el-row>
        <el-row>
            选择Y轴：
            <el-select
                    v-model="yfield" style="margin-left: 15px;margin-top:20px;" clearable placeholder="请选择统计字段">
                <el-option
                        v-for="item in fieldOption"
                        v-bind:key="item.field"
                        :label="item.fieldName"
                        :value="item.field">
                </el-option>
            </el-select>
        </el-row>
        <el-row class="block">
            <span class="demonstration">时间范围：</span>
            <el-date-picker
                    v-model="time"
                    style="width:78%;margin-left: 9px;margin-top:20px;"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
        </el-row>
        <div>
            <span>空间范围：</span>
            <el-input v-model="paramsFormData"
                      style="width:78%;margin-left: 10px;margin-top:20px"
                      clearable placeholder="请输入空间范围">
            </el-input>
            <span style="margin-left: 5px;">
            <a @click="openPosition" id="icon">
              <n3-icon type="map-marker" size="large"></n3-icon>
            </a>
          </span>
        </div>
        <el-row>
            <el-row>
                输入属性：
                <el-input v-model="inputAttr" style="width:78%;margin-left: 9px;margin-top:20px" clearable
                          placeholder="请输入属性"></el-input>
            </el-row>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "statistic",
        data() {
            return {
                name: '',
                value: '',
                xfield: '',
                yfield: '',
                num: '',
                time: '',
                inputAttr: '',
                options: [],
                fieldOption: [],
                paramsFormData: '',
                areaVisible: {
                    v: false
                },
            }
        },
        props: {
            statisticVisible: Object,
        },
        methods: {
            showTable() {
                this.options = this.$method.getOptionData('publicData');
            },
            changeDataFields(value) {
                this.num = value;
                this.showField();
            },
            showField() {
                this.fieldOption = this.$method.getField(this.num);
            },
            openPosition() {
                this.$emit('childOpen');
            },
            statSubmit() {
                let statiData = {};
                let that = this;
                statiData.tag = this.name;
                statiData.dataId = this.value;
                if (this.time != '') {
                    let start = this.time[0];
                    let end = this.time[1];
                    let star = new Date(start.toString().substring(4, 24));
                    let en = new Date(end.toString().substring(4, 24));
                    statiData.timeRange = star.getTime() + "," + en.getTime();
                }
                statiData.spatialFilter = this.paramsFormData;
                statiData.sql = this.inputAttr;
                let xGroup = '';
                for (let i = 0; i < this.fieldOption.length; i++) {
                    if (this.xfield == this.fieldOption[i].field) {
                        xGroup = this.fieldOption[i].fieldName;
                    }
                }
                statiData.groupField = xGroup;
                let yGroup = '';
                for (let i = 0; i < this.fieldOption.length; i++) {
                    if (this.yfield == this.fieldOption[i].field) {
                        yGroup = this.fieldOption[i].fieldName;
                    }
                }
                statiData.statField = yGroup;
                // statiData.tag=
                console.log(statiData);
                this.$axios.post('/parallel/data/stat/' + statiData.dataId, statiData
                ).then(function () {
                    that.$message({
                        type: 'success',
                        message: '任务提交成功，请前往统计项目进行查看'
                    });
                }).catch(function (error) {
                    that.$message({
                        type: 'warning',
                        message: '任务提交失败'
                    });
                })

            },
        },
        mounted() {
            this.showTable();
            let that = this;
            this.$Bus.$on('coordinate', (params) => {
                console.log(params)
                // that.$refs.formInput[1].value = params;
                that.paramsFormData = params;
            });
        },
        created() {
            this.$Bus.$on('statisticVisible.v', (e) => {
                this.statisticVisible.v = e;
            });
        },

    }
</script>

<style>

</style>